<template>
    <div class="container">
        <div class="site-login">
            <div class="site-login-left"></div>
            <div class="site-login-right">
                <div class="head">账户登录</div>
                <a-form v-on:submit.prevent="onSubmit" :form="form" id="login-form">
                    <div class="form-head">账号登录</div>
                    <a-form-item>
                        <a-input v-decorator="['username',{rules: [
                            {
                                required: true, message: '请输入账户名', whitespace: true
                            }]
                        }]"
                        placeholder="您的账户" :readOnly="readOnly" v-focus="readOnly = false"
                        >
                            <a-icon slot="prefix" type="user"/>
                        </a-input>
                    </a-form-item>
                    <a-form-item>
                        <a-input
                            v-decorator="['password',{rules: [
                                {
                                    required: true, message: '请输入密码', whitespace: true
                                }]
                            }]"
                            placeholder="您的密码"
                            type="password"
                        >
                            <a-icon slot="prefix" type="lock"/>
                        </a-input>
                    </a-form-item>
                    <a-form-item>
                        <a-checkbox
                                v-decorator="[
                                    'remember',
                                    {
                                        valuePropName: 'checked',
                                        initialValue: true,
                                    }
                                ]"
                        >
                            <span class="remember-label">记住密码</span>
                        </a-checkbox>
                    </a-form-item>
                    <a-form-item>
                        <a-button
                                class="login-button"
                                :loading="loading"
                                size="large"
                                html-type="submit"
                                type="primary"
                        >登录
                        </a-button>
                    </a-form-item>
                </a-form>
            </div>
        </div>
    </div>
</template>

<script>
    const Base64 = require('js-base64').Base64;
    import { routes } from '../../router'
    // const getMenus = (arr)=>{
    //     let menus = []
    //     arr.forEach(v=>{
    //         menus.push(v.url)
    //         if(v.children.length >0){
    //             menus=menus.concat(getMenus(v.children))
    //         }
    //     })
    //     return menus
    // }
    
    export default {
        data() {
            return {
                error: "",
                readOnly: true,
                loading: false,
                showLogin: false,
                ip: "",
                form: this.$form.createForm(this),
            };
        },
        methods: {
            onSubmit(e) {
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.loading = true;
                        // let trans = {
                        //     username: values.username,
                        //     password: values.password
                        // };
                        this.login(values)
                    } else {
                        this.$message.error("请输入正确的用户名密码", 1);
                        return false;
                    }
                });
            },
            setCookie(name, password, day) {
                let date = new Date();
                date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * day);
                window.document.cookie = "dis-username" + "=" + name + ";path=/;expires=" + date.toGMTString();
                window.document.cookie = "dis-password" + "=" + Base64.encode(password) + ";path=/;expires=" + date.toGMTString();
            },
            clearCookie: function() {
                this.setCookie("", "", -1);
            },
            getCookie: function() {
                if (document.cookie.length > 0) {
                    let cookie = document.cookie.split('; ');
                    for (let i = 0; i < cookie.length; i++) {
                        let arr = cookie[i].split('=');
                        if (arr[0] === 'dis-username') {
                            this.form.setFieldsValue({'username': arr[1]});
                        } else if (arr[0] === 'dis-password') {
                            this.form.setFieldsValue({'password': Base64.decode(arr[1])});
                        }
                    }
                }
            },
            getMenus() {
                console.log(routes)
                return routes
            },
            async login(trans){
                let { username, password, remember } = trans
                let { status, message, data } = await this.http("post", "/auth/login", { username, password })
                this.loading = false;
                console.log(status)
                if(status === 1){
                    if (remember) {
                        this.setCookie(username, password, 50);
                    } else {
                        this.clearCookie();
                    }
                    this.$message.success('登录成功', 1);

                    data.menu = [
                        //  {
                        //      children: [],
                        //     icon: "up-circle",
                        //     id: "3",
                        //     is_menu: "1",
                        //     key: "3",
                        //     name: "首页概览",
                        //     pid: "0",
                        //     title: "首页概览",
                        //     url: "/index"
                        //  },
                        // {
                        //     children: [],
                        //     icon: "book",
                        //     id: "4",
                        //     is_menu: "1",
                        //     key: "4",
                        //     name: "订单中心",
                        //     pid: "0",
                        //     title: "订单中心",
                        //     url: "/orders"
                        // },
                        // {
                        //     children: [],
                        //     icon: "key",
                        //     id: "5",
                        //     is_menu: "1",
                        //     key: "5",
                        //     name: "任务中心",
                        //     pid: "0",
                        //     title: "任务中心",
                        //     url: "/task",
                        // },
                        {
                            children: [
                                {
                                    icon: "up-circle",
                                    id: "70",
                                    is_menu: "1",
                                    key: "70",
                                    name: "巡检管理",
                                    pid: "6",
                                    title: "巡检管理",
                                    url: "/check"
                                },
                                {
                                    icon: "down-circle",
                                    id: "73",
                                    is_menu: "1",
                                    key: "73",
                                    name: "行业管理",
                                    pid: "6",
                                    title: "行业管理",
                                    url: "/industry"
                                }
                            ],
                            icon: "key",
                            id: "6",
                            is_menu: "1",
                            key: "6",
                            name: "运营中心",
                            pid: "0",
                            title: "运营中心",
                            url: "/operation"
                        },
                        {
                            children: [
                                {
                                    icon: "key",
                                    id: "10",
                                    is_menu: "1",
                                    key: "10",
                                    name: "部门管理",
                                    pid: "7",
                                    title: "部门管理",
                                    url: "/department"
                                },
                                // {
                                //     icon: "lock",
                                //     id: "11",
                                //     is_menu: "1",
                                //     key: "11",
                                //     name: "角色管理",
                                //     pid: "7",
                                //     title: "角色管理",
                                //     url: "/role"
                                // },
                                {
                                    icon: "user",
                                    id: "12",
                                    is_menu: "1",
                                    key: "12",
                                    name: "账号管理",
                                    pid: "7",
                                    title: "账号管理",
                                    url: "/user"
                                }
                            ],
                            icon: "team",
                            id: "7",
                            is_menu: "1",
                            key: "7",
                            name: "平台中心",
                            pid: "0",
                            title: "平台中心",
                            url: "/user"
                        }
                    ]
                    
                    this.setRole(this.getMenus([]))
                    this.setadmin(data.is_admin)
                    this.$store.dispatch("SetUserInfo", data);
                    this.$router.push("/check");
                }else{
                    this.$message.success(message, 2);
                }
            }
        },
        async mounted() {
            this.getCookie();

            console.log('aaa=>', this.$route)
            const { a, b } = this.$route.query
            if(a && b){
            console.log('登录请求参数：', a, b)
            this.loading = true;
            let trans = {
                username: a,
                password: b
            };
            this.login(trans)
            // .then(res => {
            //     console.log(res)
            //     this.loading = false;
            //     if (res.code == 401) {
            //         this.$message.error(res.msg, 1);
            //         return false;
            //     } else {
            //         this.setCookie(a, b, 50);
            //         this.clearCookie();
                    
            //         this.setRole(getMenus(res.userinfo.menu))
            //         this.setadmin(res.userinfo.is_admin)
            //         this.$store.dispatch("SetUserInfo", res.userinfo);
            //         this.$router.push("/index");
            //     }
            // });
          }
      

        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../assets/scss/mixin";

    .container {
        .remember-label {
            color: #000;
        }
        height: 100%;
        @include centering;
        background: #1e2026;
        .site-login {
            background: $white;
            height: 719px;
            @include fj();

            .site-login-left {
                @include wh(530px, 100%);
                background: url(../../assets/images/login.png);
                background-repeat:no-repeat;
                background-size: 100% 100%;
                background-position: center;
            }

            .site-login-right {
                display: flex;
                flex-direction: column;
                @include wh(530px, 100%);
                .head {
                    height: 60px;
                    background: #292C35;
                    color: #FFFFFF;
                    font-size: 1.28rem;
                    line-height: 60px;
                    padding-left: 23px;
                }
                #login-form {
                    flex: 1;
                    padding: 60px;
                    .form-head {
                        @include sc(1.71em, #000);
                        margin-bottom: 40px;
                    }
                    .login-button {
                        width: 100%;
                        height: 50px;
                        margin-top: 80px;
                        @include sc(1.28em, #FAFAFA);
                        font-weight: 700;
                    }
                }
            }
        }
    }
</style>
